<template>
	<view class="app">
		<view class="charge_bg">
			<view class="mine">￥{{ vk.pubfn.priceFilter(money) }}</view>
			<view class="list_bg">
				<view class="title">请选择充值金额</view>
				<view class="list">
					<view
						v-for="item in list"
						class="item"
						:key="item._id"
						:class="{ green: select == item._id }"
						@tap="select = item._id"
					>
						<text>充{{ parseInt(vk.pubfn.priceFilter(item.get)) }}</text>
						<text class="text">送{{ parseInt(vk.pubfn.priceFilter(item.send)) }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="payment_bg">
			<view class="title">选择充值方式</view>
			<!-- <view class="item" @tap="way = 'wxpay'">
				<image class="logo" src="@/static/mine/pay_weixin.png"></image>
				<text class="text">微信账号</text>
				<image class="icon" :src="show('wxpay')"></image>
			</view> -->
			<view class="item" @tap="way = 'alipay'">
				<image class="logo" src="@/static/mine/pay_ali.png"></image>
				<text class="text">支付宝账号</text>
				<image class="icon" :src="show('alipay')"></image>
			</view>
		</view>
		<view class="agree" @tap="checked = !checked">
			<image class="icon" :src="show2"></image>
			<text class="text">我已认真阅读并同意</text>
			<text @tap.stop="vk.navigateTo('/pages/login/agreement?type=CZXY')">
				《平台充值协议》
			</text>
		</view>
		<view class="btn" @tap="pay">充值</view>
		<pay-balance-recharge ref="vkPay"></pay-balance-recharge>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import payBalanceRecharge from "./components/pay-balance-recharge"

export default {
	components: { payBalanceRecharge },
	data() {
		return {
			list: [],
			select: "",
			way: "",

			checked: false
		}
	},
	onLoad(options = {}) {
		this.options = options
		this.getMyInfo()
	},
	onShow() {
		this.getList()
	},
	computed: {
		show2() {
			let a = require("@/static/home/choose.png")
			let b = require("@/static/home/choose_no.png")
			return this.checked ? a : b
		},
		money() {
			return vk.getVuex("$user.userInfo.account_balance.balance")
		}
	},
	methods: {
		show(type) {
			let a = require("@/static/home/choose.png")
			let b = require("@/static/home/choose_no.png")
			return this.way == type ? a : b
		},
		// 更新vuex内的用户信息
		getMyInfo() {
			vk.callFunction({ url: "client/user.getMyInfo" })
		},
		// 获取套餐
		getList() {
			vk.callFunction({
				url: "client/pub.getRechargeList"
			}).then(res => {
				this.list = res.data
				this.select = res.data[0]._id
			})
		},
		// 充值
		pay() {
			let item = vk.pubfn.getListItem(this.list, "_id", this.select)
			if (!item) {
				return vk.toast("请选择充值金额")
			}
			let that = this
			// 防抖函数
			vk.pubfn.debounce(() => {
				that.$refs.vkPay.createPayment({
					provider: that.way,
					total_fee: item.price,
					total_balance: item.real_get,
					success: data => {
						vk.toast(data.msg, "ok", () => {
							uni.$emit("walletUpdate")
							uni.navigateBack()
						})
					}
				})
			}, 600)
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	height: 100vh;
	// #ifdef H5
	height: calc(100vh - 88rpx);
	// #endif
	background-color: #f4f6f9;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	line-height: 45rpx;
	color: #333333;
}

.charge_bg {
	background-color: #ffffff;
	padding: 36rpx 0 36rpx 30rpx;
	border-top: 1rpx solid #f4f6f9;
	.mine {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		color: #333333;
		&::before {
			content: "可用金额：";
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #999999;
		}
	}
	.list_bg {
		padding-top: 28rpx;
		.list {
			display: flex;
			flex-wrap: wrap;
		}
		.item {
			width: 30.2%;
			height: 144rpx;
			background-color: #f5f5f5;
			border-radius: 4rpx;
			margin: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			line-height: 45rpx;
			color: #333333;
			font-weight: bold;
			.text {
				font-size: 24rpx;
				line-height: 37rpx;
				color: #999999;
				font-weight: normal;
			}
		}
		.green {
			color: #3ab54a;
			background-color: rgba(58, 181, 74, 0.04);
			border: 1rpx solid #3ab54a;
			.text {
				color: #3ab54a;
			}
		}
	}
}

.payment_bg {
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 36rpx 30rpx;
	.item {
		display: flex;
		align-items: center;
		padding: 36rpx 0 0 14rpx;
	}
	.text {
		flex: 1;
		padding-left: 14rpx;
	}
	.logo {
		width: 50rpx;
		height: 50rpx;
	}
	.icon {
		width: 38rpx;
		height: 38rpx;
	}
}

.agree {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	padding-top: 40rpx;
	color: #3ab54a;
	.icon {
		width: 32rpx;
		height: 32rpx;
	}
	.text {
		color: #333;
		padding-left: 12rpx;
	}
}

.btn {
	margin: 160rpx 30rpx 0;
	font-size: 28rpx;
	padding: 18rpx;
	background-color: #3ab54a;
	border-radius: 44rpx;
	text-align: center;
	color: #fff;
}
</style>
